<%--
  Created by IntelliJ IDEA.
  User: ajinlong
  Date: 2021/1/3
  Time: 14:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<!DOCTYPE html>--%>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }
    </style>
</head>

<body>

<div style="margin-bottom: 0;height: 260px;">
    <iframe src="header.jsp" scrolling="no" frameborder="0" width="100%" height="260px"></iframe>
</div>
<div style="width: 1000px;height: 800px;">
    <!-- <%--第一 部分--%> -->
    <table width=" 100%">
        <tr>
            <td style="width: 50%">
                <h6>注册新用户</h6>
            </td>
            <td style="width: 50%;text-align: right;font-size: 12px">我已经注册,现在就&nbsp;&nbsp;&nbsp;<a
                    href="login.jsp">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
        </tr>
    </table>
    <!-- <%--第二部分--%> -->
    <div
            style="text-align: center; width: 100%;height: 100%; border-left:2px #CCCCCC solid; border-right:2px #CCCCCC solid;border-bottom:2px #CCCCCC solid;margin-top: 20px">
        <div style="margin: 20px ; border-bottom: 2px #FFDC97 solid;text-align: center">
            <h6 style=" color :#A0410A; padding-bottom: 10px"> 个人用户信息</h6>
        </div>
        <form id="myform" action="homepage.jsp">
            <table style="font-size: 13px;border-spacing:0 25px">
                <tr>
                    <td>*登录名:&nbsp; &nbsp;</td>
                    <td><input type="text" id="name" style="width: 270px;height: 28px; border: 1.5px #CCCCCC solid">
                    </td>
                    <td><span id="nameSpan"></span></td>
                </tr>
                <tr>
                    <td>*设置密码:&nbsp; &nbsp;</td>
                    <td><input id="pwd" type="password"
                               style="width: 270px;height: 28px; border: 1.5px #CCCCCC solid"></td>
                    <td><span id="pwdSpan"></span></td>
                </tr>
                <tr>
                    <td>*确认密码:&nbsp; &nbsp;</td>
                    <td><input id="repwd" type="password"
                               style="width: 270px;height: 28px; border: 1.5px #CCCCCC solid"></td>
                    <td><span id="repwdSpan"></span></td>
                </tr>
                <tr>
                    <td>*真实姓名:&nbsp; &nbsp;</td>
                    <td><input id="realName" type="text"
                               style="width: 270px;height: 28px; border: 1.5px #CCCCCC solid">
                    </td>
                    <td><span id="realNameSpan"></span></td>
                </tr>
                <tr>
                    <td>*性别:&nbsp; &nbsp;</td>
                    <td>
                        <input id="man" type="radio" name="sex" value="man">男&nbsp;&nbsp;
                        <input id="women" type="radio" name="sex" value="woman">女&nbsp;&nbsp;
                    </td>
                    <td><span id="sexSpan"></span></td>
                </tr>
                <tr>
                    <td>*详细地址:&nbsp; &nbsp;</td>
                    <td><input id="addres" type="text"
                               style="width: 270px;height: 28px; border: 1.5px #CCCCCC solid">
                    </td>
                    <td><span id="addresSpan"></span></td>
                </tr>
                <tr>
                    <td>*联系电话:&nbsp; &nbsp;</td>
                    <td><input id="phone" type="text"
                               style="width: 270px;height: 28px; border: 1.5px #CCCCCC solid">
                    </td>
                    <td><span id="phoneSpan"></span></td>
                </tr>
                <tr>
                    <td>*验证码:&nbsp; &nbsp;</td>
                    <td><input id="message" type="text"
                               style="width: 150px;height: 28px; border: 1.5px #CCCCCC solid">
                    </td>
                    <td><span id="mesSpan"></span></td>
                </tr>
                <tr>
                    <td><span style="color: red">${registermes}</span></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="提交" width="75px"
                               style=" text-decoration:none;background-color: #FE901F;font-weight: bold;width: 80px;border-radius:3px;color:#FFFFFF;padding: 3px 18px 3px 18px;border: none">
                    </td>
                </tr>

            </table>
        </form>
        <textarea style="font-size: large;" rows="10" cols="120" readonly="readonly">
                                                            用户协议
第一、

第二、

第三、

第四、
            </textarea>
    </div>
</div>
<script src="js/jquery-3.5.1.js"></script>
<script>
    function checkName() {
        let name = $("#name");
        let nameSpan = $("#nameSpan");
        nameSpan.html("");
        if (name.val() == "") {
            nameSpan.html("<span>登录名不能为空<span>");
            return false;
        }
        return true;
    }

    function checkPwd() {
        // let pwd = $("#pwd");
        // let pwdSpan = $("#pwdSpan");
        // pwdSpan.html("");
        // if (pwdSpan.val() == "") {
        //     pwdSpan.html("请输入密码");
        //     return false;
        // }
        return true;
    }

    function checkRepwd() {
        let pwd = $("#pwd");
        let repwd = $("#repwd");
        let repwdSpan = $("#repwdSpan");
        repwdSpan.html("");
        if (pwd.val() == "") {
            repwdSpan.html("请再次输入密码");
            return false;
        } else if (pwd.val() != repwd.val()) {
            repwdSpan.html("两次密码不正确");
            return false;
        }
        return true;
    }

    function checkRealName() {
        let realName = $("#realName");
        let realNameSpan = $("#realNameSpan");
        realNameSpan.html("");
        if (realName.val() == "") {
            realNameSpan.html("姓名不能为空");
            return false;
        }
        return true;
    }

    function checkSex() {
        let item = $("input:radio:checked").val();
        // alert(item);

        let obj = document.getElementsByName("sex");
        let flag = false;
        let sexSpan = $("#sexSpan");
        sexSpan.html("");
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked == true) {
                flag = true;
            }
        }
        if (flag == false) {
            sexSpan.html("请选择性别");
            return flag;
        }
        return flag;
    }

    function checkAddres() {
        let addres = $("#addres");
        let addresSpan = $("#addresSpan");
        addresSpan.html("");
        if (addres.val() == "") {
            addresSpan.html("地址不能为空");
            return false;
        }
        return true;
    }

    function checkPhone() {
        let phone = $("#phone");
        let phoneSpan = $("#phoneSpan");
        phoneSpan.html("");
        if (phone.val() == "") {
            phoneSpan.html("手机号不能为空");
            return false;
        }
        return true;
    }

    function checkMessage() {
        let message = $("#message");
        let mesSpan = $("#mesSpan");
        mesSpan.html("");
        if (message.val() == "") {
            mesSpan.html("验证码不能为空");
            return false;
        }
        return true;
    }

    $(function () {
        $("#name").blur(checkName);
        $("#pwd").blur(checkPwd);
        $("#repwd").blur(checkRepwd);
        $("#realName").blur(checkRealName);
        $("#addres").blur(checkAddres);
        $("#phone").blur(checkPhone);
        $("#message").blur(checkMessage);

        let flag = true;
        $("#myform").submit(function () {
            if (!checkName()) flag = false;
            if (!checkPwd()) flag = false;
            if (!checkRepwd()) flag = false;
            if (!checkRealName()) flag = false;
            if (!checkAddres()) flag = false;
            if (!checkPhone()) flag = false;
            if (!checkMessage()) flag = false;
            if (!checkSex()) flag = false;
            let name = $("#name").val();
            let password = $("#repwd").val();
            let realName = $("#realName").val();
            let addres = $("#addres").val();
            let phone = $("#phone").val();
            let sex = $("input:radio:checked").val();
            let RegisterJson = {
                "name": name,
                "password":password,
                "realName":realName,
                "addres":addres,
                "phone":phone,
                "sex":sex
            };
            if (flag == true){
                $.post("Register", RegisterJson, function (data, code) {
                    if(data == "true") alert("注册成功");
                });
            }
            // return true;
        });
    });

</script>

</body>

</html>
